<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/zoom.css">
</head>

<body>
    <div class="wrap">
        <div class="smallBox">
            <img src="img/3.jpg" alt="">
            <span></span>
        </div>
        <div class="bigBox">
            <img src="img/3.jpg" class="pic">
        </div>
    </div>
    <script src="../js/tools.js"></script>
    <script>
        class Zoom {
            constructor() {
                this.mask = $(".smallBox span")
                this.smallBox = $('.smallBox')
                this.Pic = $('.pic')
                this.init()
            }
            init() {
                this.over()
                this.out()
                this.move()
            }
            over() {
                this.smallBox.onmouseover = () => {
                    this.mask.style.display = 'block'
                    this.Pic.parentNode.style.display = 'block'
                }
            }
            out() {
                this.smallBox.onmouseout = () => {
                    this.mask.style.display = 'none'
                    this.Pic.parentNode.style.display = 'none'
                }
            }
            move() {
                this.smallBox.onmousemove = (e) => {
                    let x = e.pageX - this.smallBox.parentNode.offsetLeft - this.mask.offsetWidth / 2
                    let y = e.pageY - this.smallBox.parentNode.offsetTop - this.mask.offsetHeight / 2

                    //边界值判断
                    if (x <= 0) {
                        x = 0
                    } else if (x >= this.smallBox.offsetWidth - this.mask.offsetWidth) {
                        x = this.smallBox.offsetWidth - this.mask.offsetWidth
                    }
                    if (y < 0) {
                        y = 0
                    } else if (y >= this.smallBox.offsetHeight - this.mask.offsetHeight) {
                        y = this.smallBox.offsetHeight - this.mask.offsetHeight
                    }

                    this.mask.style.left = x + 'px'
                    this.mask.style.top = y + 'px'
                    this.picmove(x, y)
                }
            }
            picmove(x, y) {
                let w = x /( this.smallBox.offsetWidth - this.mask.offsetWidth);
                let h = y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
                this.Pic.style.left = -w * (this.Pic.offsetWidth - this.Pic.parentNode.offsetWidth)+'px'
                this.Pic.style.top = -h * (this.Pic.offsetHeight - this.Pic.parentNode.offsetHeight)+'px'
            }

        }
        new Zoom()
    </script>
</body>

</html>